<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>query (查询)</title>
    <style>
        html,body,#viewDiv {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.17/esri/css/main.css">
    <script src="https://js.arcgis.com/4.17/"></script>
    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/FeatureLayer",
            "esri/layers/GraphicsLayer",
            "esri/Graphic"
        ],function(
            Map,
            MapView,
            FeatureLayer,
            GraphicsLayer,
            Graphic
        ){
            var map = new Map({
                basemap:"topo-vector"
            });

            var view = new MapView({
                container:"viewDiv",
                map:map,
                center:[-118.80543,34.02700],
                zoom:13
            });

            //*** CHALLENGE ***//
            var sql = "TRL_NAME like '%Canyon%'";

            view.when(function(){
                //*** ADD ***//
                // queryFeatureLayer(view.center, 1500, "intersects")
                queryFeatureLayerView(view.center, 1500, "intersects")
                
                //*** CHALLENGE ***//
                //queryFeatureLayer(view.center, 1500, "intersects", sql)
                //queryFeatureLayerView(view.center, 1500, "intersects", sql)
            });

            view.on("click", function(event){
                console.log(event)
                //*** ADD ***//
                queryFeatureLayer(event.mapPoint, 1500, "intersects")
                //queryFeatureLayerView(event.mapPoint, 1500, "intersects");
                
                //*** CHALLENGE ***//
                // queryFeatureLayer(event.mapPoint, 1500, "intersects", sql)
                // queryFeatureLayerView(event.mapPoint, 1500, "intersects", sql)
            });


            // 参照要查询的要素图层
            // 创建一个FeatureLayer并将其设置url为访问和查询
            var featureLayer = new FeatureLayer({
                url:"https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads_Styled/FeatureServer/0"
            });
            // map.add(featureLayer);

            // 返回用于绘制图形的层
            // 创建一个GraphicsLayer并将其添加到地图。
            // 图形层将用于绘制查询返回的要素
            var graphicsLayer = new GraphicsLayer();
            map.add(graphicsLayer);

            function addGraphics(result) {
                // 每次使用清除图形层
                graphicsLayer.removeAll();
                // console.log(result)
                result.features.forEach(function(feature) {
                    var g = new Graphic({
                        geometry:feature.geometry, // 取数据
                        attributes: feature.attributes,
                        symbol: {
                            type: "simple-marker",
                            color: [0, 255, 0],
                            outline: { // 设置外部边框样式
                                width: 2,
                                color: [0, 0, 0]
                            },
                            size: "20px"
                        },
                        popupTemplate: {
                            title: "{TRL_NAME}",
                            content: "This a {PARK_NAME} trail located in {CITY_JUR}."
                        }
                    });
                    graphicsLayer.add(g);  //添加到绘制图层
                });
            };
            // 定义查询数据函数
            function queryFeatureLayer(point, distance, spatialRelationship, sqlExpression) {
                var query = {
                    geometry: point,
                    distance: distance,
                    spatialRelationship: spatialRelationship,
                    outFields: ["*"],
                    returnGeometry: true,
                    where: sqlExpression
                };
                console.log(query)
                // 数据查询
                // queryFeatures 查询方法
                featureLayer.queryFeatures(query).then(function (result) {
                    console.log(result)
                    addGraphics(result, true);
                });
            };

            // Client-side query
            // 客户端查询
            function queryFeatureLayerView(point, distance, spatialRelationship, sqlExpression){ 
                if (!map.findLayerById(featureLayer.id)) {
                featureLayer.outFields = ["*"];
                map.add(featureLayer,0);
                }
                var query = {
                    geometry: point,
                    distance: distance,
                    spatialRelationship: spatialRelationship,
                    outFields: ["*"],
                    returnGeometry: true,
                    where: sqlExpression
                };
                console.log(111)
                // Wait for the layerview to be ready and then query features
                // 等待layerview就绪，然后查询要素
                // 由于只能在加载图层后查询要素，因此请使用whenLayerView以确保图层已准备好且未更新
                view.whenLayerView(featureLayer).then(function(featureLayerView) {
                    if (featureLayerView.updating) {
                        var handle = featureLayerView.watch("updating", function(isUpdating){
                            if (!isUpdating) {
                                featureLayerView.queryFeatures(query).then(function(result) {
                                    addGraphics(result) 
                                });
                                handle.remove();
                            }
                        });            
                    } else {
                        featureLayerView.queryFeatures(query).then(function(result) {
                        addGraphics(result);
                        });
                    }
                });
            } 
        })
    </script>
</head>
<body>
    <div id="viewDiv"></div>
</body>
</html>